<template>
	<view style="position: relative;height: 100%;width:100%;" :style="{paddingLeft:paddingLeft+'px'}">
		<view style="position: absolute;left:50%;top:50%;transform: translate(-50%,-50%);" :style="{width:cardWidth+'px',height:cardHeight+'px'}">
			<view class="card" style="z-index: 13;" :style="{width:cardWidth+'px',height:cardHeight+'px',left:left+'px',top:top+'px','border-radius':borderRadius+'px',backgroundColor:cardBgColor,borderColor:borderColor}" :class="{'animation':isAnimating,'shadowEffect':hasShadow,'boderEffect':hasBorder}" @touchstart="touchStart" @touchmove.stop="touchMove" @touchcancel="touchCancel" @touchend="touchCancel">
				<slot name="firstCard"></slot>
			</view>
			<view class="card" style="z-index: 12;" :style="{width:width2+'px',height:height2+'px',left:left2+'px',top:top2+'px','border-radius':borderRadius+'px',backgroundColor:cardBgColor,borderColor:borderColor}" :class="{'animation':isAnimating,'shadowEffect':hasShadow,'boderEffect':hasBorder}">
				<slot name="secondCard"></slot>
			</view>
			<view class="card" style="z-index: 11;" :style="{width:width3+'px',height:height3+'px',left:left3+'px',top:top3+'px','border-radius':borderRadius+'px',backgroundColor:cardBgColor,borderColor:borderColor}" :class="{'animation':isAnimating,'shadowEffect':hasShadow,'boderEffect':hasBorder}">
				<slot name="thirdCard"></slot>
			</view>
			<view class="card" style="z-index: 10;" :style="{width:width4+'px',height:height4+'px',left:left4+'px',top:top4+'px','border-radius':borderRadius+'px',backgroundColor:cardBgColor,opacity:opacity4,borderColor:borderColor}" :class="{'animation':isAnimating,'shadowEffect':hasShadow,'boderEffect':hasBorder}">
				
			</view>
		</view>
	</view>
</template>

<script>
	var timeoutTimer;
	export default {
		props:{
			// 正常卡片宽度
			cardWidth: {
				type: Number,
				default: 260
			},
			// 正常卡片高度
			cardHeight: {
				type: Number,
				default: 300
			},
			// 卡片层叠的横向边距
			leftPad:{
				type: Number,
				default: 10
			},
			// 卡片层叠的纵向边距
			topPad:{
				type:Number,
				default:6
			},
			// 卡片背景色
			cardBgColor:{
				type:String,
				default:"#fff"
			},
			// 卡片拖拽方向
			dragDirection:{
				type:String,
				default:"all" //all,vertical,horizontal
			},
			// 卡片的圆角弧度
			borderRadius:{
				type:Number,
				default:10
			},
			borderColor:{
				type:String,
				default:'#ccc'
			},
			// 卡片触发飞卡效果的距离
			throwTriggerDistance:{
				type:Number,
				default:100
			},
			// 飞卡的移动距离
			throwDistance:{
				type:Number,
				default:1000
			},
			// 是否开启卡片描边效果
			hasBorder:{
				type:Boolean,
				default:false
			},
			// 是否开启阴影效果
			hasShadow:{
				type:Boolean,
				default:true
			}
		},
		data() {
			return {
				left:0,
				top:0,
				startLeft:0,
				startTop:0,
				isDrag:false,
				isThrow:false,
				needBack:false,
				isAnimating:false,
				
				left2:0,
				top2:0,
				width2:0,
				height2:0,
				
				left3:0,
				top3:0,
				width3:0,
				height3:0,
				
				left4:0,
				top4:0,
				width4:0,
				height4:0,
				opacity4:0,
				
				paddingLeft:0,
				paddingTop:0
			};
		},
		methods:{
			getDistance:function(x1, y1, x2, y2) {
				var _x = Math.abs(x1 - x2); 
				var _y = Math.abs(y1 - y2); 
				return Math.sqrt(_x * _x + _y * _y);
			},
			touchStart:function(e){
				if(this.isAnimating)return;
				
				this.isDrag=true;
				this.needBack=false;
				this.isThrow=false;
				var curTouch=e.touches[0];
				this.startLeft=curTouch.clientX-this.left;
				this.startTop=curTouch.clientY-this.top;
				
				this.onDragStart();
			},
			touchMove:function(e){
				if(this.isAnimating)return;
				
				var curTouch=e.touches[0];
				if(this.dragDirection=="all"||this.dragDirection=="horizontal")this.left=curTouch.clientX-this.startLeft;
				if(this.dragDirection=="all"||this.dragDirection=="vertical")this.top=curTouch.clientY-this.startTop;
				var distance=this.getDistance(0,0,this.left,this.top);
				
				this.onDragMove({left:this.left,top:this.top,distance:distance});
			},
			touchCancel:function(e){
				var distance=this.getDistance(0,0,this.left,this.top);
				
				this.isDrag=false;
				this.onDragStop({left:this.left,top:this.top,distance:distance});
				if(this.isAnimating)return;
				
				var that=this;
				var curTouch=e.touches[0];
				var distance=this.getDistance(0,0,this.left,this.top);
				if(distance>this.throwTriggerDistance){
					this.makeCardThrow();
				}else{
					this.makeCardBack();
				}
			},
			resetAllCardDown:function(){
				this.left=0;
				this.top=0;
				
				this.width2=(this.cardWidth-this.leftPad*2);
				this.height2=(this.cardHeight-this.topPad*2);
				this.left2=this.leftPad;
				this.top2=(this.topPad*3);
				
				this.width3=(this.cardWidth-this.leftPad*4);
				this.height3=(this.cardHeight-this.topPad*4);
				this.left3=this.leftPad*2;
				this.top3=(this.topPad*6);
				
				this.width4=(this.cardWidth-this.leftPad*6);
				this.height4=(this.cardHeight-this.topPad*6);
				this.left4=this.leftPad*3;
				this.top4=(this.topPad*9);
				this.opacity4=0;
				
			},
			resetAllCard:function(){
				this.resetAllCardDown();
			},
			makeCardThrow:function(){
				var that=this;
				
				this.isThrow=true;
				this.needBack=false;
				
				var angle = Math.atan2((this.top-0), (this.left-0));
				this.left=Math.cos(angle)*this.throwDistance;
				this.top=Math.sin(angle)*this.throwDistance;
				
				this.width2=this.cardWidth;
				this.height2=this.cardHeight;
				this.left2=0;
				this.top2=0;
				
				this.width3=(this.cardWidth-this.leftPad*2);
				this.height3=(this.cardHeight-this.topPad*2);
				this.left3=this.leftPad;
				this.top3=(this.topPad*3);
				
				this.width4=(this.cardWidth-this.leftPad*4);
				this.height4=(this.cardHeight-this.topPad*4);
				this.left4=this.leftPad*2;
				this.top4=(this.topPad*6);
				this.opacity4=1;
				
				this.isAnimating=true;
				
				this.onThrowStart();
				timeoutTimer=setTimeout(function(){
					that.isThrow=false;
					that.isAnimating=false;
					that.onThrowDone();
					that.resetAllCard();
				},400);
			},
			makeCardBack:function(){
				var that=this;
				
				this.isThrow=false;
				this.needBack=true;
					
				if(this.needBack){
					this.left=0;
					this.top=0;
				}
				
				this.isAnimating=true;
				timeoutTimer=setTimeout(function(){
					that.onThrowFail();
					that.isAnimating=false;
					that.needBack=true;
				},600);
			},
			onDragStart:function(){
				this.$emit('onDragStart');
			},
			onDragMove:function(obj){
				this.$emit('onDragMove',obj);
			},
			onDragStop:function(obj){
				this.$emit('onDragStop',obj);
			},
			onThrowFail:function(){
				this.$emit('onThrowFail');
			},
			onThrowStart:function(){
				this.$emit('onThrowStart');
			},
			onThrowDone:function(){
				this.$emit('onThrowDone');
			}
		},
		beforeUnmount() {
			if(timeoutTimer)clearTimeout(timeoutTimer);
		},
		mounted() {
			this.resetAllCard();
		}
	}
</script>

<style>
	.card
	{
		position: absolute;
		overflow: hidden;
	}
	.card.boderEffect
	{
		border: 1px solid #ccc;
	}
	.card.shadowEffect
	{
		box-shadow: 0px 4px 20px rgba(0,0,0,.3);
	}
	.card.animation
	{
		transition: opacity .4s ease-out,left .4s ease-out,top .4s ease-out,width .4s ease-out,height .4s ease-out;
	}
</style>
